<script setup>
import { color } from "echarts";
import { ref } from "vue";

const option = ref({
  backgroundColor: "rgba(0,0,0,0)",
  tooltip: {
    // position: "top",
  },
  title: {
    text: "科学成就影响",
    left: "center",
    top: 10,
    textStyle: {
      color: "#000",
    },
  },
  //筛选
  legend: {
    data: ["火药", "造纸术", "指南针", "印刷术"],
    orient: "vertical", // 关键配置：垂直方向
    left: 0, // 左侧对齐
    top: 20, // 距顶部偏移
    itemGap: 10, // 图例项间隔
    itemWidth: 25, // 图例标记宽度
    itemHeight: 14, // 图例标记高度
  },

  radar: {
    center: ["50%", "50%"], //水平居中垂直往下移动
    radius: "60%", //缩小雷达图

    indicator: [
      { name: "知识传播", max: 100 }, // 文学传播/教育普及
      { name: "技术革新", max: 100 }, // 工艺创新/制造技术
      { name: "军事变革", max: 100 }, // 武器装备/战略战术
      { name: "经济发展", max: 100 }, // 贸易流通/生产方式
      { name: "科学探索", max: 100 }, // 地理发现/天文观测
      { name: "文化影响", max: 100 }, // 艺术创作/哲学思想
    ],
    shape: "circle",
    splitNumber: 5,
    axisName: {
      color: "#346c9d",
    },
    splitLine: {
      lineStyle: {
        opacity: 0.2,
        color: [
          "#346c9d",
          "#346c9d",
          "#346c9d",
          "#346c9d",
          "#346c9d",
          "#346c9d",
        ].reverse(),
      },
    },
    splitArea: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        opacity: 0.2,
        color: "#346c9d",
      },
    },
  },
  series: [
    {
      lineStyle: {
        width: 1,
        opacity: 0.5,
      },
      symbol: "none",
      itemStyle: {
        color: "#346c9d", //改变填充颜色
      },
      areaStyle: {
        opacity: 0.1,
      },
      name: "Budget vs spending",
      type: "radar",
      data: [
        {
          name: "造纸术",
          value: [
            98, // 知识传播（书籍产量增长300倍）
            85, // 技术革新（纤维处理技术突破）
            30, // 军事变革（情报传递加速）
            92, // 经济发展（文化用品市场规模）
            88, // 科学探索（观测记录保存）
            95, // 文化影响（诗词创作繁荣）
          ],
          itemStyle: { color: "#2ecc71" },
        },
        {
          name: "印刷术",
          value: [
            95, // 知识传播（书籍成本降低90%）
            88, // 技术革新（活字材料演进）
            25, // 军事变革（兵法传播速度）
            90, // 经济发展（印刷产业兴起）
            82, // 科学探索（学术论文传播）
            92, // 文化影响（白话文学普及）
          ],
          itemStyle: { color: "#3498db" },
        },
        {
          name: "火药",
          value: [
            40, // 知识传播（军事著作传播）
            92, // 技术革新（冶炼技术突破）
            98, // 军事变革（热兵器革命）
            85, // 经济发展（矿业开采效率）
            75, // 科学探索（化学研究进展）
            60, // 文化影响（武侠文化发展）
          ],
          itemStyle: { color: "#e74c3c" },
        },
        {
          name: "指南针",
          value: [
            65, // 知识传播（航海日志记录）
            80, // 技术革新（磁化技术改进）
            88, // 军事变革（海军作战范围）
            95, // 经济发展（海上丝绸之路）
            97, // 科学探索（地球磁场研究）
            78, // 文化影响（风水学说发展）
          ],
          itemStyle: { color: "#f1c40f" },
        },
      ],
    },
  ],
});
</script>

<template>
  <!-- 科学成就的雷达图 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<style lang="scss" scoped>
// .chart{
//     background: transparent !important;
// }
</style>
